<!doctype html>
<html lang="zh-CN">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="xuejianxinokok">
	<title>分页组件</title>
	<link rel="stylesheet" href="resources/css/bootstrap.min.css" />
	<link rel="stylesheet" href="resources/css/dashboard.css" />
	<meta name="theme-color" content="#7952b3">


	<style>

	</style>



</head>

<body>
<div id="page">
	<nav aria-label="Page navigation  ">
		每页条数：
		<select v-model="pageSizeOpt" style="width: 100px">
			<option v-for="(item,index) in pageSizeOpts" :key="index" :value='item'>{{item}}</option>
		</select>
		<ul class="pagination pagination-sm justify-content-end">
			<li class="page-item" @click="previousPage()">
				<a class="page-link" href="#" aria-label="Previous">
					<span aria-hidden="true">&laquo;</span>
				</a>
			</li>
			<li class="page-item" v-for="(item, index) in beginTabs" :key="index" @click="changePage(item)">
				<a class="page-link" href="#">{{item}}</a>
			</li>
			<li v-if="tabs.length > 6">...</li>
			<li class="page-item" v-for="(item, index) in endTabs" :key="index" @click="changePage(item)">
				<a class="page-link" href="#">{{item}}</a>
			</li>
			<!--          <li class="page-item"><a class="page-link" href="#" @click="">2</a></li>-->
			<!--          <li class="page-item"><a class="page-link" href="#">3</a></li>-->
			<li class="page-item" @click="nextPage()">
				<a class="page-link" href="#" aria-label="Next">
					<span aria-hidden="true">&raquo;</span>
				</a>
			</li>
		</ul>
	</nav>
</div>
	<script src="resources/js/http.js"></script>
	<script src="resources/js/vue.global.prod.js"></script>
	<script src="resources/js/bootstrap.bundle.min.js"></script>
	<script src="resources/js/feather.min.js"></script>
	<script src="./main.js"></script>
	<script>
		/*渲染图标  feather:false */
		(function () {
			'use strict'
			feather.replace({ 'aria-hidden': 'true' })
		})()
		let param2 = {
			el:'#page',
			props: {
				total: { // 总条数
					type: Number,
					default:0,
				},
				pageSize: { // 每页条数
					type: Number,
					default: 2,
				},
				current: { // 当前页
					type: Number,
					default: 1,
				},
				maxTabNum: { // 显示的最多页码，超出省略号
					type: Number,
					default: 6,
				},
				pageSizeOpts: { // 每页切换配置
					type: Array,
					default: ()=>{
						return [2, 10, 20, 40];
					},
				},
			},
			template: document.getElementById("page").innerHTML,
			data(){
				return{
					tabs: [],// 页码数组
					pageSizeOpt: 2,
					pageNum: 0,
				}
			},
			mounted(){
				alert(333)
				// alert(222)
				this.pageSizeOpt = this.pageSize;
				this.pageNum = this.current;
				// this.initTabs();
			},
			computed: {
				beginTabs(){
					const that = this;
					return that.tabs.length > 3 ? that.tabs.slice(0,3): that.tabs;
				},
				endTabs(){
					const that = this;
					return that.tabs.length > 5 ? that.tabs.slice(3): [];
				},
			},
			watch:{
				total: {
					handler(newVal, oldVal) {
						this.initTabs();
					},
				},
				pageSizeOpt:{  // 改变条数
					handler(newVal, oldVal) {
						const that = this;
						that.$emit("on-page-size-change", newVal);
						that.initTabs();
					},
				},
				// pageSize:{  // 改变条数
				//   handler(newVal, oldVal) {
				//     const that = this;
				//     that.initTabs();
				//   },
				// },
			},
			methods: {
				// 计算页码数组
				initTabs() {
					const that = this;
					if (!that.total || !that.pageSizeOpt || !that.current) {
						return;
					}
					// 获取所有页码数量
					const tabNum = that.total / that.pageSizeOpt;
					let totalTabNum = parseInt(tabNum);
					if (totalTabNum < tabNum) {
						totalTabNum += 1;
					}
					// 够六个和不够六个两种情况
					if (totalTabNum > that.maxTabNum) {
						// 取前三个和后三个中间省略号
						that.tabs = [1, 2, 3];
						for (let i = totalTabNum, j = 3; j >= 0; i--, j++) {
							that.tabs.splice(j, 0, j + 1);
						}
					} else {
						that.tabs = [];
						for (let i = 1; i <= totalTabNum; i++) {
							that.tabs.push(i);
						}
					}
				},
				// 改变页码
				changePage(pageNum) {
					const that = this;
					that.pageNum = pageNum;
					that.$emit("on-change", pageNum);
				},
				previousPage() {
					const that = this;
					if (that.pageNum <= 1) {
						return;
					}
					that.pageNum -= 1;
					that.$emit("on-change", that.pageNum);
				},
				nextPage() {
					const that = this;
					if (that.pageNum >= that.tabs[that.tabs.length - 1]) {
						return;
					}
					that.pageNum += 1;
					that.$emit("on-change", that.pageNum);
				},
			}
		};
		initComponent(param2);
	</script>
</body>

</html>